<template>
  <div class="container">
    <header class="header">
      <div class="admin">
        <span>管理员</span>
        <i class="el-icon-user"></i>
      </div>
      <el-button type="primary" class="back-button" @click="goBack"
        >点击返回</el-button
      >
    </header>

    <main class="content">
      <section class="message-id">
        <h3>留言ID：{{ backId }}</h3>
      </section>

      <section class="comment-section">
        <h3>留言内容</h3>
        <div class="comment">{{ items.feedback }}</div>
      </section>

      <section class="response-section">
        <h3>管理员回复</h3>
        <div class="response">{{ items.response }}</div>
      </section>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      backId: "",
      items: {
        // feedBack: null, // 初始化 feedBack 属性
        // response: null  // 初始化 response 属性
      },
      commentContent: "",
      responseContent: "",
    };
  },
  created() {
    this.backId = this.$route.params.backId;
    this.$http
      .get("/getBackAndSpo", {
        params: {
          backId: this.backId,
        },
      })
      .then((result) => {
        console.log(result.data);
        this.items = result.data;
        console.log("爱是感动和梵蒂冈发的" + this.items.feedBack);
      });

    this.fetchComment();
    this.fetchResponse();
  },
  methods: {
    fetchComment() {
      console.log(this.items.feedBack);

      this.commentContent = this.items.feedBack; //`能否添加XXXXX公司的XXXX设备？(留言ID: ${this.backID})`
    },
    fetchResponse() {
      console.log(this.items.response);
      this.responseContent = this.items.response; //"我们已经收到您的请求，正在评估中。"
    },
    goBack() {
      this.$router.go(-1);
    },
  },
};
</script>

<style scoped>
.container {
  background-color: #feffff;
  height: 100vh;
  box-sizing: border-box;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background-color: #ffffff;
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
}

.admin {
  display: flex;
  align-items: center;
}

.back-button {
  margin-left: auto;
}

.content {
  padding: 24px;
}

.comment-section,
.response-section {
  margin-bottom: 32px;
}

.comment,
.response {
  background-color: #fff;
  border: 1px solid #ddd;
  padding: 12px;
  border-radius: 4px;
  margin-top: 8px;
}

.response {
  white-space: pre-wrap;
}

.message-id {
  margin-bottom: 20px;
  padding: 8px;
  background-color: #f8f9fa;
  border-radius: 4px;
}

.message-id h3 {
  color: #666;
  margin: 0;
}
</style>
